<template>
  <el-container>
    <div class="login form-outer el-center">
      <el-form ref="form" :model="loginData" :rules="rules.loginRules">
        <div class="title">
          <h3>系统登录</h3>
        </div>
        <el-form-item label="" prop='messageId'>
          <el-input v-model="loginData.managerId" placeholder="输入管理员ID"></el-input>
        </el-form-item>
        <el-form-item label="" prop='password'>
          <el-input v-model="loginData.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-container>
</template>
<script>
export default {
  name: 'login',
  data() {
    return {
      loginData: {
        managerId: '',
        password: ''
      },
      rules: {
        loginRules: {
          managerId: [{ required: true, message: '请输入管理员ID', trigger: 'blur' }],
          password: [{ required: true, min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }]
        }
      }
    }
  },
  methods: {
    Login() {
      this.$store.dispatch('login', this.loginData)
      // api.LOGIN(this.loginData).then(({ data }) => {
      //   if (data.status === 200) {
      //     window.localStorage.adminToken = data.data.token
      //     this.$router.replace('/goods')
      //   }
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.form-outer {
  // position: absolute;
  top: 0;
  left: 0;
  position: relative;
  border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 420px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    display: flex;
    margin-bottom: 30px;
    h2 {
    }
    a {
      cursor: pointer;
      margin-left: 20px;
      font-size: 12px;
      display: flex;
      align-items: flex-end;
      color: #000;
    }
  }
}
</style>
